<template>
<div class="container" @click="handleGallaryClick">
    <div class="wrapper">
        <swiper :options="swiperOptions">
           <swiper-slide v-for="(item ,index) in imgs" :key="index">
           <img class="gallary-img" :src="item">
           </swiper-slide>            
           <div class="swiper-pagination" slot="pagination"></div>
         </swiper>
         <div class="swiper-pagination"></div>  
    </div>

</div>
    
</template>

<script>
export default {
    name:'CommonGallary',
    props:{
        imgs:{
            type:Array,
            default(){
                return []
            }
        }
    },
    methods: {
      handleGallaryClick(){
          this.$emit('close')
      }  
    },
    data(){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination',
                paginationType:'fraction',
                //自我刷新
                observeParents:true,
                observer:true,      
            }
        }
    }
};
</script>

<style scoped>
.container>>>.swiper-container{
    overflow: inherit;
        position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
}
.wrapper{     
    height:100%;
    width: 100%;   
   
}
.gallary-img{
 
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.swiper-pagination{
    color: #fff;
    bottom: -1rem;
}
</style>
